<% cache_unless page_builder_enabled?, [*spree_storefront_base_cache_scope.call(section), @taxons].compact do %>
  <div style='<%= section_styles(section) %>'>
    <h1 class='text-xl lg:text-2xl font-medium pb-8 page-container' style='<%= section_heading_styles(section) %>'>
      <%= section.heading %>
    </h1>

    <div class='border-y border-default py-3'>
      <ul class='page-container overflow-auto flex gap-2 items-center justify-between text-sm'>
        <li>
          <%= link_to '#', class: 'block !leading-4 py-2 transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
            <%= Spree.t(:all) %>
          <% end %>
        </li>
        <% @taxons_grouped_by_letter.each do |letter, taxons| %>
          <li>
            <% if taxons.present? %>
              <%= link_to "##{letter}", class: 'block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
                <%= letter %>
              <% end %>
            <% else %>
              <span class='block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent text-neutral cursor-default'>
                <%= letter %>
              </span>
            <% end %>
          </li>
        <% end %>
        <li>
          <% if @taxons_grouped_by_numbers.any? %>
            <%= link_to '#0-9', class: 'block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
              0-9
            <% end %>
          <% else %>
            <span class='block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase text-neutral cursor-default'>
              0-9
            </span>
          <% end %>
        </li>
        <li>
          <% if @taxons_grouped_by_other.any? %>
            <%= link_to '##', class: 'block !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
              <%= Spree.t(:other) %>
            <% end %>
          <% else %>
            <span class='block !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase text-neutral cursor-default'>
              <%= Spree.t(:other) %>
            </span>
          <% end %>
        </li>
      </ul>
    </div>

    <div class='page-container mt-10 mb-10 lg:mb-16'>
      <div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
        <% @taxons_grouped_by_letter.each do |letter, taxons| %>
          <div id='<%= letter %>' class='grid gap-6 grid-cols-3 lg:grid-cols-2 border-b border-default py-6 lg:pr-6'>
            <p class='font-medium text-2xl<%= ' pointer-events-none opacity-30' unless taxons.present? %>'>
              <%= letter %>
            </p>
            <% if taxons.present? %>
              <ul class='col-span-2 lg:col-span-1'>
                <% taxons.each do |taxon| %>
                  <li>
                    <%= link_to taxon.name, spree.nested_taxons_path(taxon), class: 'block py-1 border-b-[1.5px] border-transparent hover:border-accent transition-all duration-300' %>
                  </li>
                <% end %>
              </ul>
            <% end %>
          </div>
        <% end %>

        <div id='0-9' class='grid gap-6 grid-cols-3 lg:grid-cols-2 border-b border-default py-6'>
          <p class='font-medium text-2xl uppercase<%= ' pointer-events-none opacity-30' unless @taxons_grouped_by_numbers.any? %>'>
            0-9
          </p>
          <ul class='col-span-2 lg:col-span-1'>
            <% @taxons_grouped_by_numbers.each do |_, taxons| %>
              <% taxons.each do |taxon| %>
                <li>
                  <%= link_to taxon.name, spree.nested_taxons_path(taxon), class: 'block py-1 border-b-[1.5px] border-transparent hover:border-accent transition-all duration-300' %>
                </li>
              <% end %>
            <% end %>
          </ul>
        </div>

        <div id='#' class='grid gap-6 grid-cols-3 lg:grid-cols-2 border-b border-default py-6'>
          <p class='font-medium text-2xl uppercase<%= ' pointer-events-none opacity-30' unless @taxons_grouped_by_other.any? %>'>
            <%= Spree.t(:other) %>
          </p>
          <ul class='col-span-2 lg:col-span-1'>
            <% @taxons_grouped_by_other.each do |_, taxons| %>
              <% taxons.each do |taxon| %>
                <li>
                  <%= link_to taxon.name, spree.nested_taxons_path(taxon), class: 'block py-1 border-b-[1.5px] border-transparent hover:border-accent transition-all duration-300' %>
                </li>
              <% end %>
            <% end %>
          </ul>
        </div>
      </div>
    </div>
  </div>
<% end %>
